<template>
  <div class="rank">
    <scroll class="top-list" :data="topList" ref="toplist">
      <div>
        <ul>
          <li class="item" v-for="item of topList" :key="item.id" @click="toTopList(item)">
            <div class="icon">
              <img :src="item.picUrl" alt="">
            </div>
            <ul class="songlist">
              <li class="song"
              v-for="(song, index) of item.songList" :key="index">
              <span>{{index + 1}}</span>
              <span>{{song.songname}} - {{song.singername}}</span>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </scroll>
    <transition name="slide">
      <router-view></router-view>
    </transition>
  </div>
</template>
<script>
import {getTopList} from 'api/rank'
import {ERR_OK} from 'api/config'
import Scroll from 'base/scroll/scroll'
import {playlistMixin} from 'common/js/mixin'
import {mapMutations} from 'vuex'
export default {
  name: 'Rank',
  mixins: [playlistMixin],
  data () {
    return {
      topList: []
    }
  },
  mounted () {
    this._getTopList()
  },
  methods: {
    toTopList (item) {
      this.$router.push({path: `/rank/${item.id}`})
      this.setToplist(item)
    },
    handlePlaylist (playlist) {
      const bottom = playlist.length > 0 ? '140px' : ''
      this.$refs.toplist.$el.style.bottom = bottom
      this.$refs.toplist.refresh()
    },
    _getTopList () {
      getTopList()
        .then((res) => {
          if (res.code === ERR_OK) {
            this.topList = res.data.topList
            // console.log(this.topList)
          }
        })
    },
    ...mapMutations({setToplist: 'SET_TOPLIST'})
  },
  components: {
    Scroll
  }
}
</script>
<style lang="scss" scoped>
@import 'common/scss/variable.scss';
@import 'common/scss/mixin.scss';
.rank{
  .top-list{
    position: fixed;
    top: 2.09rem;
    width: 100%;
    bottom: 0;
    overflow: hidden;
    ul{
      .item{
        display: flex;
        margin: 0 0.4rem;
        height: 2rem;
        padding-top: 0.4rem;
        .icon{
          width: 2rem;
          height: 2rem;
          background: $color-background-d;
          img{
            width: 100%;
          }
        }
        .songlist{
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 0 0.4rem;
          height: 2rem;
          overflow: hidden;
          background: $color-highlight-background;
          color: $color-text-d;
          font-size: $font-size-medium;
          .song{
            @include ellipse();
            line-height: 0.52rem;
          }
        }
      }
    }
  }
  .slide-enter, .slide-leave-to{
    transform: translateX(100%)
  }
  .slide-enter-active, .slide-leave-active{
    transition: all 0.3s
  }
}
</style>
